<script>
import UniPopup from "@/components/no-mask-popup/uni-popup.vue";
import analysisVideo from "../../analysisVideo.vue";
import closeIcon from "../../../assets/close.png";
import common from "../../common";
import { showToast } from "../../../../../../utils";
export default {
  name: "answerSheet",
  components: { analysisVideo, UniPopup },
  watch: {
    viewAnalysis: {
      handler(val) {
        //重置题目索引
        this.$emit("update:currentQuestionIndex", 0);
      },
      immediate: true,
    },
    currentQuestionIndex(val) {
      this.currentQuestion = this.questionList[val];
    },
  },
  data() {
    return {
      questionList: [], //题目列表
      textQuestionList: [], //题目选项列表
      closeIcon,
      common,
      lastBtn: "", //用于标识用户点击的上一个按钮，以提供相应的样式效果进行标识，增强用户体验
      currentQuestion: null, //当前题目
      isVip: false,
    };
  },
  created() {
    //数据初始化
    this.questionList = this.parent.questionList;
    this.textQuestionList =
      this.root.details.paragraphCorresponding.textQuestionList;
    this.currentQuestion = this.questionList[this.currentQuestionIndex];
    this.isVip = this.root.isVip;
  },
  props: {
    viewAnalysis: Boolean,
    currentQuestionIndex: Number,
  },
  methods: {
    open(serialNum) {
      //根据题目序号寻找题目索引
      if (serialNum) {
        for (let i = 0; i < this.questionList.length; i++) {
          const item = this.questionList[i];
          if (item.serialNum === serialNum) {
            this.$emit("update:currentQuestionIndex", i);
            break;
          }
        }
      }
      this.$refs["answer-sheet"].open();
    },
    // 切换到上一题
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.$emit(
          "update:currentQuestionIndex",
          this.currentQuestionIndex - 1,
        );
      } else {
        showToast.default("已经是第一题了");
      }
    },
    //切换到下一题
    nextQuestion() {
      if (this.currentQuestionIndex < this.questionList.length - 1) {
        this.$emit(
          "update:currentQuestionIndex",
          this.currentQuestionIndex + 1,
        );
      } else {
        showToast.default("已经是最后一题了");
      }
    },
    //选择了题目选项
    questionOptionSelect(item) {
      this.$set(this.currentQuestion.topic, "userAnswer", item.mark);
      this.currentQuestion.topic.doRight = item.answer;
      //自动跳到下一题
      setTimeout(() => {
        this.nextQuestion();
      }, 500);
    },
    //根据选项mark查找选项的content内容和trans翻译
    findOptionContentByMark(mark) {
      return this.textQuestionList.find((item) => item.mark === mark);
    },
    //判断该选项是否有选过
    isOptionSelected(mark) {
      let boolean = false;
      for (let item of this.questionList) {
        if (item.topic.userAnswer === mark) {
          boolean = true;
          break;
        }
      }
      return boolean;
    },
  },
  inject: ["root", "parent"],
  emits: ["submit", "update:currentQuestionIndex"],
};
</script>

<template>
  <uni-popup
    ref="answer-sheet"
    type="bottom"
    :is-mask-click="false"
    mask-background-color="transparent"
  >
    <view class="answer-sheet-content">
      <view class="header">
        <!--				题目标题-->
        <view class="question-name">
          <text>{{ currentQuestion.topic.serialNum }}</text>
          <text>.\t</text>
          <text>{{ currentQuestion.topic.content }}</text>
          <text
            style="color: darkred"
            v-if="viewAnalysis && !currentQuestion.topic.userAnswer"
            >\t\t【未作答】</text
          >
        </view>
        <image
          class="icon"
          :src="closeIcon"
          @click="$refs['answer-sheet'].close()"
        ></image>
      </view>
      <view class="content">
        <!--				选项列表-->
        <!--						做题模式-->
        <block v-if="!viewAnalysis">
          <view class="option-list">
            <block v-for="item in textQuestionList" :key="item.mark">
              <view
                class="option-item"
                @click="() => questionOptionSelect(item)"
              >
                <view
                  :class="[
                    isOptionSelected(item.mark) ? 'hasDo' : '',
                    currentQuestion.topic.userAnswer === item.mark
                      ? 'active'
                      : '',
                    'mark',
                  ]"
                  >{{ item.mark }}
                </view>
                <view class="content">{{ item.content }}</view>
              </view>
            </block>
          </view>
        </block>
        <!--				题目解析-->
        <view class="analysis" v-else>
          <!--					正确答案-->
          <view
            ><text>正确答案：</text>
            <text>{{ currentQuestion.topic.answer }}</text>
            <text>.\t</text>
            <text>{{
              findOptionContentByMark(currentQuestion.topic.answer).content
            }}</text></view
          >
          <!--					用户回答-->
          <view
            >你的作答：<text
              :class="
                currentQuestion.topic.userAnswer ===
                currentQuestion.topic.answer
                  ? 'doRight'
                  : 'doWrong'
              "
            >
              <text>{{
                currentQuestion.topic.userAnswer
                  ? currentQuestion.topic.userAnswer
                  : "未作答"
              }}</text>
            </text></view
          >
          <!--					会员才能查看题目解析-->
          <template v-if="isVip">
            <view
              v-html="currentQuestion.topic.analysis"
              v-if="currentQuestion.topic.analysis"
            ></view>
            <view
              style="margin-top: 20rpx"
              v-if="currentQuestion.topic.videoUrl"
            >
              <analysisVideo
                :video-file-url="currentQuestion.topic.videoUrl"
              ></analysisVideo>
            </view>
          </template>
          <!--					非会员展示查看解析按钮引导用户去开通会员-->
          <view v-else style="display: flex; justify-content: flex-end">
            <view
              style="
                padding: 0 30rpx;
                height: 80rpx;
                border-radius: 40rpx;
                display: flex;
                align-items: center;
                background: var(--theme-color);
              "
              @click="() => root.checkIsVip()"
              >查看解析</view
            >
          </view>
        </view>
      </view>
      <!--			底部控制栏-->
      <view class="footer">
        <view class="btn" @click="() => parent.openAnswerRecord()"
          >题目一览
        </view>
        <view
          class="btn"
          @click="
            lastBtn = 'prevQuestion';
            prevQuestion();
          "
          :class="[lastBtn === 'prevQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex > 0"
          >上一题
        </view>
        <!--					做第一题时把上一题按钮禁用掉-->
        <view class="btn disable" v-else>上一题</view>
        <view
          class="btn"
          @click="
            lastBtn = 'nextQuestion';
            nextQuestion();
          "
          :class="[lastBtn === 'nextQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex < questionList.length - 1"
          >下一题
        </view>
        <!--					最后一道题显示提交按钮-->
        <view
          class="btn"
          v-else-if="!viewAnalysis"
          @click="
            () => {
              $emit('submit');
            }
          "
          >完成作答
        </view>
        <view class="btn disable" v-else>下一题</view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.answer-sheet-content {
  background: white;
  border-radius: 40rpx 40rpx 0 0;
  padding: {
    top: 30rpx;
    left: 30rpx;
    right: 30rpx;
  }
  border: 4rpx inset #999999;
  height: 726rpx;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .question-name {
      margin-top: 20rpx;
      font-size: 34rpx;
      font-weight: bold;
    }
    > .icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
  > .content {
    height: 0;
    flex: 1;
    overflow-y: scroll;
    .option-list {
      .option-item {
        display: flex;
        align-items: center;
        margin-top: 30rpx;
        .mark {
          height: 80rpx;
          display: flex;
          align-items: center;
          padding: 0 40rpx;
          margin-right: 20rpx;
          background: var(--gray-background-color);
          border-radius: 40rpx;
          font-size: 34rpx;
          &.hasDo {
            background: var(--theme-color-light);
          }
          &.active {
            background: var(--theme-color);
          }
        }
        .content {
          font-size: 30rpx;
        }
      }
    }
    > .analysis {
      font-size: 32rpx;
      line-height: 2;
      margin-top: 20rpx;
      .doRight {
        color: #1b9b69;
        font-weight: bold;
      }
      .doWrong {
        color: #f00;
        font-weight: bold;
      }
    }
  }
  > .footer {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    .btn {
      height: 60rpx;
      display: flex;
      align-items: center;
      border-radius: 40rpx;
      padding: 0 40rpx;
      border: 4rpx solid #999999;
      font-size: 30rpx;
      background: var(--theme-color-light);
      &.disable {
        opacity: 0.5;
      }
      &.active {
        border: 4rpx solid var(--text-color-theme);
      }
    }
  }
}
</style>
